<div id="user" class="mdl-grid" ng-controller="userCtrl">
    <div class="p-section usertable">
        <div class="table-bar clearfix">
            <div class="table-bar-action">
                <a ui-sref="user_add" class="button button-3d button-action button-tiny">
                    <i class="material-icons">playlist_add</i> 添加
                </a>
                <a href="javascript:void(0)" id="user_edit" class="button button-3d button-tiny">
                    <i class="material-icons">text_fields</i> 编辑
                </a>
                <a href="javascript:void(0)" id="user_dele" class="button button-3d button-caution button-tiny">
                    <i class="material-icons">delete_sweep</i> 删除
                </a>
            </div>
            <div class="table-bar-search">
                <span class="mdl-chip mdl-chip--contact" id="search">
                    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">
                        <i class="material-icons">search</i>
                    </span>
                    <span class="mdl-chip__text">搜索/查找</span>
                </span>
            </div>
        </div>
        <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
            <thead>
            <tr>
                <th>
                    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check_all">
                        <input type="checkbox" id="check_all" class="mdl-checkbox__input"/>
                    </label>
                </th>
                <th>账号</th>
                <th>用户名</th>
                <th>角色</th>
                <th>权限</th>
            </tr>
            </thead>
            <tbody class="userlist">
                <tr ng-if="page.loadingState">
                    <td colspan="8" style="text-align: center; padding: 25px 0">
                        <div class="mdl-spinner mdl-js-spinner is-active"></div>
                    </td>
                </tr>
                <tr ng-repeat="user in userLists track by user.uid" on-finish-render>
                    <input type="hidden" value="{{ user.uid }}">
                    <td>
                        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="{{ user.uid }}">
                            <input type="checkbox" id="{{ user.uid }}" class="mdl-checkbox__input"/>
                        </label>
                    </td>
                    <td>{{ user.account }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.role }}</td>
                    <td>
                        <span class="mdl-chip" ng-repeat="right in user.right track by $index">
                            <span class="mdl-chip__text">{{ right }}</span>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="table-foot">
            <div class="foot-action">
                <button type="button" ng-click="firstPage()" class="button button-circle button-tiny">
                    <i class="material-icons">skip_previous</i>
                </button>
                <button type="button" ng-click="prevPage()" class="button button-circle button-tiny">
                    <i class="material-icons">navigate_before</i>
                </button>

                <div ng-class="['mdl-textfield', 'mdl-js-textfield',{'is-dirty is-focused': clearStyle}]">
                    <input type="text" id="c_page" class="mdl-textfield__input"
                           ng-model="page.customPage"
                           ng-keydown="goPage($event)">
                    <label class="mdl-textfield__label" for="c_page">页码</label>
                </div>

                <button type="button" ng-click="nextPage()" class="button button-circle button-tiny">
                    <i class="material-icons">navigate_next</i>
                </button>
                <button type="button" ng-click="lastPage()" class="button button-circle button-tiny">
                    <i class="material-icons">skip_next</i>
                </button>

            </div>
            <div class="foot-statu">
                当前第 {{ page.currentPage }} 页，共 {{ page.totalPage }} 页
            </div>
        </div>
    </div>

    <search-mask></search-mask>
</div>

<script>
    $(function () {
        var userDeleBtn = $('#user_dele')
        var userEditBtn = $('#user_edit')
        var userList = $('.userlist')
        var checkAllBox = $('#check_all')

        checkAllBox.on('change',function(){     // 全选 & 取消全选
            var childCheckBoxs = userList.find('.mdl-checkbox')
            if( $(this).is(':checked') ){
                childCheckBoxs.each(function (index) {
                    $(this).addClass('is-checked')
                    $(this).children('input').attr('checked',true)
                })
            }else{
                childCheckBoxs.each(function (index) {
                    $(this).removeClass('is-checked')
                    $(this).children('input').attr('checked',false)
                })
            }
        })

        userDeleBtn.on('click',function (e) {
            e.preventDefault()
            var checkArgs = []
            var checks = userList.find('.mdl-checkbox__input:checked')
            checks.each(function (index, element) {
                checkArgs.push( $(this).attr('id') )
                $(this).parents('tr').remove()
            })
            console.log('选中的记录为：------')
            console.log(checkArgs)
        })

        userEditBtn.on('click',function(e){
            e.preventDefault()
            var check = userList.find('.mdl-checkbox__input:checked')
            if(!check.length){
                alert('抱歉你还未选择任意用户')
                return false
            }else if(check.length>1){
                alert('请选中一个用户进行编辑')
                return false
            }else{
                window.location.href = '#/user/edit/'+check.attr('id')
            }
        })

    })
</script>